@base-color:#2381e8;
@box-width:1200px;
.margin-center(){
  margin: 0 auto;
}
body{
  font-size: 14px;
  font-weight: normal;
  //font-family: sans-serif;
  //min-width: 1200px;
}
//@css h1
.title(@color){
  text-align: center;
  color: @color;
  position: relative;
  margin-top: 70px;
  margin-bottom: 70px;
  &:after{
    position: absolute;
    content: "";
    width: 100px;
    height: 5px;
    background: @color;
    bottom: -15px;
    left: 50%;
    .translate(-50%,0);
  }
};
a{
  color:#000;
  &:focus{
    text-decoration: none;
  }
}
//css
@mobilePadding:10px;
/**
* animation
*/
.keyframes (@prefix,@name,@content) when (@prefix=def) {
  @keyframes @name {
    @content();
  }
}
.keyframes (@prefix,@name,@content) when (@prefix=moz) {
  @-moz-keyframes @name {
    @content();
  }
}
.keyframes (@prefix,@name,@content) when (@prefix=o) {
  @-o-keyframes @name {
    @content();
  }
}
.keyframes (@prefix,@name,@content) when (@prefix=webkit) {
  @-webkit-keyframes @name {
    @content();
  }
}
.keyframes (@prefix,@name,@content) when (@prefix=all) {
  .keyframes(moz, @name, @content);
  .keyframes(o, @name, @content);
  .keyframes(webkit, @name, @content);
  .keyframes(def, @name, @content);
}

/**
 *media
 */
.max-media(@size,@content){
  @media screen and (max-width: @size){
    @content();
  }
};
.min-media(@size,@content){
  @media screen and (min-width: @size){
    @content();
  }
};


.translate(@x,@y){
  -webkit-transform: translate(@x,@y);
  -moz-transform: translate(@x,@y);
  -ms-transform: translate(@x,@y);
  -o-transform: translate(@x,@y);
  transform: translate(@x,@y);
}
.rotate(@deg){
  -webkit-transform: rotate(@deg);
  -moz-transform: rotate(@deg);
  -ms-transform: rotate(@deg);
  -o-transform: rotate(@deg);
  transform: rotate(@deg);
}